<template>
  <div>
    <MessageWinComponent ref="oper-alert-win" :message="msg"/>
    <div class="mc-recipe-main">
      <div class="mv-recipe-left-div">
        <ToolBarComponent ref="queryRecipeBar" bar-ref-name="operBar" min-height="70px">
          <Button text="全量字典导出" :click-function="dataExport"/>
          <Button text="拼音生成" :click-function="pinyinGenerator"/>
          <Button text="新增合成表" :click-function="addRecipe"/>
          <Button text="删除合成表" :click-function="subRecipe"/>
          <Button text="提交" :click-function="submitRecipe"/>
        </ToolBarComponent>
        <ToolBarComponent class="mc-item-div" ref="material-name-div">
          <InputComponent input-lable="物品名" input-name="materialName" input-type="text"/>
          <InputComponent input-lable="所属MOD" input-name="materialModName" input-type="text"/>
          <SelectComboComponent ref="oriMaterialCombo" input-name="materialOriFlag" input-lable="是否原始物品" group-code="G0001"/>
        </ToolBarComponent>
        <ToolBarComponent class="mc-item-manage-recipe-div" :id="index" ref="item-recipe" v-for="(item,index) of recipeNum" v-bind:key="index">
          <h4 style="display: inline;padding-right: 20px">● 合成表{{index+1}}</h4>
          <Button text="新增原料" :click-function="addMeterial" :extend-value="{index:index}"/>
          <Button text="删除原料" :click-function="subMeterial" :extend-value="{index:index}"/>
          <div class="recipe-basic-div" ref="basic-input-div">
            <SelectComboComponent ref="recipeEnergyType" input-name="energyType" input-lable="能量类型" group-code="BM03001"/>
            <NumberInputComponent input-lable="能量需求量" input-name="energyNum"/>
            <NumberInputComponent input-lable="合成表产量" input-name="prodUnit"/>
          </div>
          <div ref="item-input"  v-for="(item,index) of recipeNum[index]['recipeItems']" v-bind:key="index" class="mc-recipe-item-div">
            <SelectInputComponent :input-lable="'合成物'+(index+1)" input-type="text" input-name="materialName" :ref="'materialName'+index" :select-function="selectClick"/>
            <NumberInputComponent input-lable="需求量" input-name="demandNum" :ref="'demandNum'+index"/>
          </div>
        </ToolBarComponent>

        <ToolBarComponent>
          <Button text="提交" :click-function="submitRecipe"/>
        </ToolBarComponent>
      </div>
      <div class="mv-recipe-right-div">
        <ToolBarComponent ref="queryBar" bar-ref-name="queryBar" min-height="70px">
          <InputComponent input-lable="合成物名称" input-name="materialNameLike" input-type="text"/>
          <Button text="查询" :click-function="dictQuery"/>
        </ToolBarComponent>
        <!--   物品查询列表   -->
        <GridComponent
            ref="mcItemGrid"
            :auto-load="true"
            key-property-name="id"
            grid-name="mcItemInfoGrid"
            select-moduel="single"
            load-url="mcgame/dictQuery.do"
            max-height-prop="83%"
            :paging-moduel="true"
        >
          <GridColumnComponent width="320px" column-name="物品名称" index-name="dictName"/>
          <GridColumnComponent width="200px" column-name="MOD所属" index-name="modName"/>
        </GridComponent>
      </div>
    </div>
  </div>
</template>

<script>
import ToolBarComponent from "@/components/toolbar/ToolBarComponent";
import InputComponent from "@/components/input/InputComponent";
import GridColumnComponent from "@/components/grid/GridColumnComponent";
import GridComponent from "@/components/grid/GridComponent";
import Button from "@/components/button/ButtonComponent";
import NumberInputComponent from "@/components/input/NumberInputComponent";
import {postRequest} from "@/axio2";
import SelectInputComponent from "@/components/input/SelectInputComponent";
import SelectComboComponent from "@/components/input/SelectComboComponent";
import MessageWinComponent from "@/components/win/MessageWinComponent";

export default {
  name: "McItemManagePage",
  components: {
    MessageWinComponent,
    SelectComboComponent,
    SelectInputComponent,
    NumberInputComponent, Button, GridComponent, GridColumnComponent, InputComponent, ToolBarComponent},
  data(){
    return{
      recipeItemNum:[],
      //
      recipeNum:[],
      msg:""
    }
  },
  methods:{
    dataExport(){
      postRequest(
          "mcgame/dataExpot.do",
          {},
          null,
          null,
          this
      );
    },
    pinyinGenerator(){
      postRequest(
          "mcgame/pinyinGen.do",
          {},
          null,
          null,
          this
      );
    },
    dictQuery(){
      let param = this.$refs["queryBar"].getSubmitParams();
      this.$refs["mcItemGrid"].addQueryParams(param);
      this.$refs["mcItemGrid"].load();
    },
    addMeterial(event,extData){
      let i = extData["index"];
      if(this.recipeNum[i]["recipeItems"].length===9){
        alert("合成原料数量不可能超过9个");
        return;
      }
      this.recipeNum[i]["recipeItems"].push({});
    },
    subMeterial(event,extData){
      let i = extData["index"];
      if(this.recipeNum[i]["recipeItems"].length===0){
        return;
      }
      this.recipeNum[i]["recipeItems"].pop();
    },
    addRecipe(){
      this.recipeNum.push({recipeItems:[]});
    },
    subRecipe(){
      if(this.recipeNum.length===0){
        return;
      }
      this.recipeNum.pop();
    },
    selectClick(event,component){
      let dict = this.$refs["mcItemGrid"].getSelectData();
      if(undefined===dict || dict.length<1){
        return;
      }
      component.setSelectedValue({'display':dict[0].dictName,'value':dict[0].id})
    },
    submitRecipe(){
      // 获取物品名称、MOD、是否原始物品信息
      let materialInfo = this.$refs["material-name-div"].getSubmitParams();
      let requestParam = JSON.parse(JSON.stringify(materialInfo));
      // 获取全部物品合成表信息
      if("0"===requestParam["materialOriFlag"]) {
        let recipeList = this.$refs["item-recipe"];
        for (let i = 0; i < recipeList.length; i++) {
          // 循环组装物品合成表
          let recipeInput = recipeList[i];
          let recipeBaseParam = recipeInput.$slots.default[3].children;
          // 物品合成表基础数据信息：能量类型、能量数量、合成表产量
          this.recipeNum[i]["energyType"] = recipeBaseParam[0].componentInstance.getInputValue()["value"];
          this.recipeNum[i]["energyNum"] = recipeBaseParam[1].componentInstance.getInputValue()["value"];
          this.recipeNum[i]["prodUnit"] = recipeBaseParam[2].componentInstance.getInputValue()["value"];
          // 获取当前合成表的原材料要求
          let recipe = this.recipeNum[i]["recipeItems"];
          for (let j = 0; j < recipe.length; j++) {
            let recipeItem = recipe[j];
            let recipeDiv = recipeInput.$slots.default[j + 4];
            // 原料物品ID
            recipeItem["sourceId"] = recipeDiv.children[0].componentInstance.getInputValue()["value"];
            // 原料物品需求数量
            recipeItem["num"] = recipeDiv.children[1].componentInstance.getInputValue()["value"];
          }
          // 将合成表数组加入到请求信息中
          requestParam["recipeArr"] = this.recipeNum;
        }
      }
      postRequest(
          'mcgame/addMaterial.do',
          {materialInfo:JSON.stringify(requestParam)},
          this.operResultSuccess,
          this.operResultFail,
          this
      );
    },
    operResultSuccess(resp,component){
      let win = component.$refs["oper-alert-win"];
      this.recipeNum = [];
      this.msg = "处理成功";
      win.showWin();
    },
    operResultFail(respData,component){
      let win = component.$refs["oper-alert-win"];
      this.msg = respData.data.errorMsg;
      win.showWin();
    }
  }
}
</script>

<style scoped>
.mv-recipe-left-div{
  overflow-y:scroll;
  vertical-align: top;
  display: inline-block;
  height: 100%;
  width: 57%;
  border-left: 1px #2c3e50 solid;
  border-right: 1px #2c3e50 solid;
}
.mv-recipe-right-div{
  overflow-y:scroll;
  vertical-align: top;
  display: inline-block;
  height: 100%;
  width: 41%;
  border-left: 1px #2c3e50 solid;
  border-right: 1px #2c3e50 solid;
}
.mc-recipe-main{
  height: 100%;
  width: 100%;
}
.mc-recipe-item-div{
  width: 100%;
  margin-top: 10px;
  border-bottom: 1px #cccccc solid;
}
.mc-item-manage-recipe-div{
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px #8db2e6 solid;
}
.mc-item-div{
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px #8db2e6 solid;
}
.recipe-basic-div{
  padding-top: 10px;
}
</style>